<script>
import App from "@/App.vue";

export default {
  name: "Home",
  components: {App},
  methods:{
    toProduct(){
      this.$router.push({path:"/home/product"});
    }
  }
}
</script>

<template>
    <h3>这是主页面</h3>
    <div>
      <el-link href="/login">去登录</el-link>
    </div>
  <hr>
    <ul class="nav">
      <li>
        <a href="javascript:void(0)" @click="toProduct">商品列表</a>
      </li>
      <li>
        <router-link to="/home/user">用户列表</router-link>
      </li>
      <li>
        <router-link to="/home/test">textAxios</router-link>
      </li>
    </ul>
  <!-- 数据展示区域  -->
  <div class="right_container">
    <RouterView/>
  </div>
</template>

<style scoped>
 .nav{
   border: 1px solid blue;
   width: 10%;
   height: 100vh;
   float: left;
 }
  .nav li{
    list-style: none;
    height: 60px;
  }
  .right_container{
    float: right;
    width: 80%;
  }
</style>